<template>
  <div class="xiying">
    <div class="topbar">
      <router-link :to="{ path: '/' }">
        <div class="backbox"><img src="../assets/back.png" alt="" /></div>
      </router-link>
      <div class="title">喜迎二十大</div>
      <div class="sendbox"><img src="../assets/send.png" alt="" /></div>
    </div>
    <div class="xiyingimg">
      <img src="../assets/lun1.webp" alt="" />
    </div>
    <div class="xiyinglist">
        <ul class="list">
            <li v-for="item in mylist" :key="item.id">
                <router-link :to="{path :'/readview',query:{id: item.id}}">
                    <div class="imgbox"><img :src="item.cover" alt=""></div>
                    <div class="mainbox">
                        <h3>{{item.title}}</h3>
                        <div class="zuozhe">
                            <span>{{item.author}}/</span>
                            <span>{{item.category}}/</span>
                            
                        </div>
                        <div class="jianjie">
                            简介:<span>{{item.content}}
                            </span>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import xiyingli from '../components/xiyingli.vue'
import { get } from '../http/request';
export default {
  name: "xiying",
  data(){
    return {
      mylist:""
    }
  },
  methods: {
    async gettopdata(){
      await get(`https://apis.netstart.cn/yunyuedu/store/show.json?type=recommend&uuid=f2cb32ff209f4010911a77a617add8c4`)
      .then(
        res=>{
          console.log(res.data.list[2]);
          this.mylist = res.data.list[2].list;
          console.log(this.mylist);
        }
      )
    }
  },
  components:{
    xiyingli
  },
  created(){
    this.gettopdata();
  }
};
</script>

<style lang="scss" scoped>
.xiying {
  font-size: 16px;
  width: 100%;
  .topbar {
    width: 100%;
    height: 50px;
    // background-color: skyblue;
    display: flex;
    justify-content: space-between;
    .backbox {
      width: 50px;
      height: 50px;
      text-align: center;
      img {
        width: 30px;
        height: 30px;
        margin-top: 10px;
      }
    }
    .title {
      width: 150px;
      height: 50px;
      // background-color: gray;
      text-align: center;
      line-height: 50px;
    }
    .sendbox {
      width: 50px;
      height: 50px;
      text-align: center;
      img {
        width: 30px;
        height: 30px;
        margin-top: 10px;
      }
    }
  }
  .xiyingimg {
    box-sizing: border-box;
    width: 375px;
    height: 180px;
    // margin-bottom: 30px;
    border-bottom: 1px solid gainsboro;
    img {
      width: 375px;
      height: 150px;
    }
  }
  .xiyinglist {
    width: 100%;
    padding: 0 10px;
    li {
      padding-top: 30px;
      width: 100%;
      padding-bottom: 30px;
      border-bottom: 1px solid gainsboro;
      a {
        display: flex;
        justify-content: space-around;
        .imgbox {
          width: 100px;
          height: 150px;
          img {
            width: 100px;
            height: 150px;
          }
        }
        .mainbox {
          width: 230px;
          h3 {
            margin-bottom: 10px;
          }
          .zuozhe {
            color: gray;
            margin-bottom: 10px;
          }
          .jianjie {
            color: gray;
            width: 220px;
          height: auto;
          display: -webkit-box;
          overflow: hidden; /*超出隐藏*/
          text-overflow: ellipsis; /*隐藏后添加省略号*/
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //想显示多少行
          }
        }
      }
    }
  }
}
</style>